//团购条目的垂直布局（用于展示商品简要信息）

//条目的垂直布局，用于商品简要信息展示，用在 新品推荐 和 热销爆款 上

import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, Image, TouchableOpacity } from 'react-native'

import { Heading2, Title, Price } from '../../widget/Text'
import { screen, system } from '../../common'

type Props = {
    onPress: Function,
    info: Object,
}

class HomeMenuItem extends PureComponent<Props> {
    render() {
        return (
            <TouchableOpacity style={styles.container}
                onPress={this.props.onPress}>
                <Image source={{ uri: this.props.info.imageUrl }} resizeMode='contain' style={styles.image} />
                <View style={{justifyContent:'flex-start',alignItems:'center'}}>
                    <Title>{this.props.info.title}</Title>
                    <Price>¥{this.props.info.price}</Price>
                </View>
            </TouchableOpacity>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        alignItems: 'center',
        width: screen.width / 3,
        height: screen.width / 4,
        backgroundColor: 'white'
    },
    image: {
        width: screen.width / 7,
        height: screen.width / 7,
        marginBottom: 5,
    }
})

export default HomeMenuItem
